<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JavaScript/js/tools.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 
            设置outer的样式
        */
        #outer{
            /* 这个宽度也要加20，因为外边距 */
            width: 652px;
            height: 340px;
            /* 居中 */
            margin: 50px auto;
            /* 设置背景颜色 */
            background-color: yellowgreen;
            /* 设置padding */
            padding: 10px 0;
            /* 如果子元素开启了绝对定位，最好为父元素开启相对定位，ul相对于outer定位 */
            position: relative;
            /* 裁剪溢出的内容 */
            overflow:hidden;

        }
        /* 设置IMGlIST */
        #imgList{
            /* 去除项目符号 */
            list-style: none;
            /* 设置ul的宽度,3张图片的宽度 */
            /* 设置了外边距，不够宽了。加上3*20=1956 */
            /* width: 1956px; */
            /* 开启绝对定位 */
            position: absolute;
            /* 设置偏移量 */
            /* 每向左移动652px,就会显示到下一张图片 */
            left: -652px;
        }
        /* 设置图片中的li */
        #imgList li{
            /* li是块元素，垂直排列想让其水平排列需要浮动 */
            float: left;
            /* 设置左右外边距 */
            margin: 0 10px;
        }
        /* 设置导航按钮 */
        #navDiv{
            /* 开启绝对定位 ,他是imgList下面的兄弟元素，所以会在它上面出现*/
            position: absolute;
            /* 设置位置 */
            bottom: 15px;
             /* 
                设置left值
                outer宽度652px
                navDiv宽度25*3=75
                （652-75）/2=288.5
            */
            /* left:288.5px; */


        }
        #navDiv a{
            /* 设置浮动，将其变成块元素 */
            float: left;
            /* 设置宽高，内联元素宽高不起作用 */
            width: 10px;
            height: 10px;
            /* 将它变成块元素不好 */
            /* display: block; */

            background-color: red;
            /* 设置左右外边距 */
            margin: 0 5px;
            /* 设置透明 */
            opacity: 0.5;
            /* 兼容IE8透明 */
            filter: alpha( opacity=50);
           
        }
        /* 设置鼠标移入效果 */
        #navDiv a:hover{
            background-color: black;
        }

    </style>
    <script>
        window.onload=function(){
            //获取imgList
            var imgList=document.getElementById("imgList");
            //获取页面中所有的img标签
            var imgArr=document.getElementsByTagName("img");
            //设置imgList的宽度
            imgList.style.width=652*imgArr.length+"px";
            
            //设置导航按钮居中
            var navDiv=document.getElementById("navDiv");
            var outer=document.getElementById("outer");
            navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";

            //默认显示图片的索引
            var index=0;
            //获取到所有的a
            var allA=document.getElementsByTagName("a");
            //设置默认选中的效果
            allA[index].style.backgroundColor="black";
            /* 
                点击超链接切换到指定的图片
                点击第一个超链接，显示第一个图片
                点击第二个超链接，显示第二个图片

            */
           //为所有的超链接都绑定单击响应函数
           //注意：先执行for循环，再执行单击响应函数
           for(var i=0;i<allA.length;i++){
               //为每一个超链接都添加一个num属性
               allA[i].num=i;
               allA[i].onclick=function(){
                   //获取点击超链接的索引,并将其设置为index
                   index=this.num;
                   //切换图片 
                   /* 
                    第一张 0 0
                    第二张 1 -652
                    第三张 2 -1304
                   */
                //   imgList.style.left=-652*index+"px";
                  //修改正在选中的a
                  setA();
                  //使用move函数来切换图片
                  move(imgList,"left",-652*index,20,function(){

                  })
               };
           }
           //创建一个方法用来设置选中的a
           function setA(){
               //遍历所有的a,并将他们的背景颜色设置为红色
               for(var i=0;i<allA.length;i++){
                   allA[i].style.backgroundColor="";
               }
            //将选中的A设置为黑色
            allA[index].style.backgroundColor="black";
           }



        }
    </script>
</head>
<body>
    <!-- 创建一个外部的容器 -->
    <div id="outer">
        <!-- 创建一个无序列表,用于放置图片 -->
        <ul id="imgList">
            <li>
                <img src="../mi/img/ad1.jpg" alt="">
            </li>
            <li>
                <img src="../mi/img/ad2.png" alt="">
            </li>
            <li>
                <img src="../mi/img/ad3.jpeg" alt="">
            </li>
        
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        
        </div>
    </div>
</body>
</html>